<template>
  <div>
    <goga-header title="地址管理">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div>
      <div class="address-list">
        <div class="item" v-for="address in getAddress.list">
          <div class="top">
            <span>{{address.aName}}</span>
            <span>{{address.aPhone}}</span>
          </div>
          <div class="center">
            {{address.aShen}}-{{address.aShi}}-{{address.aXian}}-{{address.aDetail}}
          </div>
          <div class="bottom">
              <span>
                <a class="p-choose" @click="setdefault(address.id)" :class="[address.aDefault?'check':'']"><icon symbol="check"></icon><i class="iconfont" :class="[address.aDefault?'icon-roundcheckfill':'icon-round']"></i>&nbsp;<span >选择地址</span></a>
              </span>
              <span>
                <router-link :to="{name:'address-edit', params: {id:address.id}}" ><icon symbol="edit"></icon>&nbsp;编辑</router-link>&nbsp;<a @click="addressDel(address.id)"><icon symbol="remove"></icon>&nbsp;删除</a>
              </span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-bottom">
      <router-link :to="{name:'address-add'}" class="btn">添加地址</router-link>
    </div>
  </div>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'


  const fetchAddressData = async function (store) {
    await store.dispatch('backend/tempOrder/getAddress')
  }
  export default {
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        getAddress: 'backend/tempOrder/getAddress'
      })
    },
    async mounted () {
      if(this.getAddress.list.length == 0) {
        fetchAddressData(this.$store)
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      addressDel (addressID) {
        let self = this;
        if(confirm("确认删除？")) {
          api.get('api/v1/UserInfo/delAddress.ashx', {addressId: addressID})
            .then(function ({res}) {
              if (res.StatusCode === '200') {
                this.$store.dispatch('global/toast', '删除成功');
                self.fetchAddressData(self.$sore)
              }
            })
        }
      },
      async setdefault (addressID) {
        let self = this
        let {data: {StatusCode}} = await api.get('api/v1/UserInfo/addressDefault.ashx', {addressId: addressID})
        if (StatusCode === '200') {
          this.$store.dispatch('backend/tempOrder/clearDefaultAddress');
          this.$store.dispatch('global/toast', '选择成功');
          fetchAddressData(this.$store);
          this.goBack()
        }
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
